<link rel="stylesheet" type="text/css" href="C:\VG_DATA\TECH_MATERIAL\POC\fashbook\trunk\src\main\webapp\static\styles\jcrop\jquery.Jcrop.css" />
<script src="C:\VG_DATA\TECH_MATERIAL\POC\fashbook\trunk\src\main\webapp\static\js\jquery.Jcrop.js"></script>

<html>
<head>
 <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script
	src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

</head>
<body>

<script>

$(document).ready(function() {
	$("#dialog").dialog({autoOpen : false, modal : true, show : "blind", hide : "blind"});
	 $("#contactus").click(function() {
	     alert("Hello world!");
	    
	     $( "#dialog" ).dialog("open");
	     return false;
	   });
	 
	 $('#refdialog').click(function (e) {
			<a href="">Add new Tag</a>
		});
	 
	    $('#actualImage').Jcrop({
	        setSelect: [0, 0, 300, 500],
	        aspectRatio: 3/5
	        addClass: 'custom',
	        bgColor: 'black',
	        bgOpacity: .6,
	        //sideHandles: true
	        allowResize: false,
	        allowSelect: false,
	        onSelect: storeCoords
	        
	    });
	    
	    $('#actualImage').resizable();
	
	 });
	 
$(function() {
    $( "#actualImage" ).resizable({ aspectRatio: .75 });
});
	 
function cropPicture(){
	 $.ajax({
		 
		 alert("Hello world!");
	 url: "cropPhoto.htm",
	 type: "POST", 
	 data :{
	 x : $('input#X1').val(),
	 y : $('input#Y1').val(),
	 x2 : $('input#X2').val(),
	 y2 : $('input#Y2').val(), 
	 w : $('input#W').val(),
	 h : $('input#H').val(),
	 imageName : $('input#imageName').val()
	 },
	 success: function (data) { 
	 window.location = 'photo.htm';
	 }
	 }




</script>
	<a href="" id="contactus">contactus</a>
	<div id="dialog">
	appear now
	</div>
	<div id="refdialog">
		i am a link
	</div>
	<form onSubmit="cropPicture()">
	<img id = "actualImage" class="ui-widget-content" src="http://localhost:8080/resources/fashbook/images/person/10/10_temp.jpg" />
	<!-- <img id = "actualImage" src="C:\Users\AQUA\Downloads\fashbook_images\Sedona_2 071.JPG" /> -->
	<input type="submit" value="add"/>
	</form>
	
	<div id="resizable">
    <h3>Resizable</h3>
</div>

</body>
</html>